<template>
<div class="ry">
    分类
</div>
<div class="nr">
    <router-link to="/"><el-button type="danger" plain>推荐</el-button></router-link>||
   <el-button type="danger"  >书城</el-button>||
    <router-link to="/cart"><el-button type="danger"  plain>我的</el-button></router-link>
</div>

<div class="slidershow middle">

    <div class="slides">
        <input type="radio" name="r" id="r1" checked>
        <input type="radio" name="r" id="r2">
        <input type="radio" name="r" id="r3">
        <input type="radio" name="r" id="r4">
        <div class="slide s1">
            <a href="/src/lbtwz/tgcf.html">
                 <img src="/public/lsp/tgcf.jpg" alt="">
            </a>
           
        </div>
        <div class="slide">
            <a href="/src/lbtwz/cnjs.html">
             <img src="/public/lsp/cnjs.jpg" alt="">   
            </a>
        </div>
        <div class="slide">
            <a href="/src/lbtwz/xwz.html">
                <img src="/public/lsp/xwz.png" alt="">
            </a>
            
        </div>
        <div class="slide">
            <a href="/src/lbtwz/zgn.html">
              <img src="/public/lsp/zgn.png" alt="">  
            </a>
            
        </div>
    </div>
</div>

<div class="navigation">
    <label for="r1" class="bar"></label>
    <label for="r2" class="bar"></label>
    <label for="r3" class="bar"></label>
    <label for="r4" class="bar"></label>
</div>

<div style="position: relative; top: 250px;">
   <products></products> 
</div>

</template>

<script setup>
 import Products from './Products.vue';
</script>

<style scoped>

.slidershow{
    width: 370px;
    height: 200px;
    padding-left: 10px;
    overflow: hidden;
    position: absolute;
}
.middle{
    position: absolute;
    top: 18%;
}
.navigation{
    position: absolute;
    bottom: 20px;
    display: flex;
}
.bar{
    width: 30px;
    height: 5px;
    border: 2px solid rgb(110, 109, 109);
    margin: 6px;
    cursor: pointer;
    transition: 1.4s;
    position: relative;
    top: -440px;
    left: 115px;
}
.bar:hover{
    background: rgb(246, 175, 87);
}
input[name="r"]{
    position: absolute;
    visibility: hidden;
}
.slides{
    width: 500%;
    height: 100%;
    display: flex;
}
.slide{
    width: 20%;
    transform: 1.6s;
}
.slide img{
    width: 100%;
    height: 100%;
}
#r1:checked ~ .s1{
    margin-left: 0;
}
#r2:checked ~ .s1{
    margin-left: -20%;
}
#r3:checked ~ .s1{
    margin-left: -40%;
}
#r4:checked ~ .s1{
    margin-left: -60%;
}
.ry{
    font-size: 20px;
    padding-top: 50px;
    height: 50px;
    background:linear-gradient(to bottom,rgb(249, 88, 47),rgb(237, 161, 145)) ;
}
.nr{
    padding-top: 5px;
}

</style>